<template>
  <div id="ht-time-btns" :style="boxStyle">
    <div
      v-for="item in btns"
      :key="item"
      class="one-btn"
      :style="style"
      @click="handleClick(item)"
    >
      <img :src="imrUrl(item)" alt="" />
      <i :class="iconClass"></i>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    btns: {
      type: Array,
      default: () => [],
    },
    btnsAtNewLine: {
      type: Boolean,
    },
  },
  data() {
    return {};
  },
  computed: {
    imrUrl() {
      return name => require('../imgs/' + name + '.png');
    },
    iconClass() {
      return name => {
        let icon;
        switch (name) {
          case 'query':
            icon = 'el-icon-search';
            break;
          case 'left':
            icon = 'el-icon-arrow-left';
            break;
          case 'right':
            icon = 'el-icon-arrow-right';
            break;
          case 'refresh':
            icon = 'el-icon-refresh';
            break;
        }
        return icon;
      };
    },
    boxStyle() {
      const style = {};
      if (this.btnsAtNewLine) {
        style.width = '100%';
        style.marginTop = '10px';
      } else {
        style.marginLeft = '10px';
      }
      return style;
    },
    style() {
      const style = {};
      if (this.btnsAtNewLine) {
        style.flex = 1;
      }
      return style;
    },
  },
  methods: {
    handleClick(type) {
      this.$emit('onBtnClick', type);
    },
  },
};
</script>

<style lang="scss" scoped>
#ht-time-btns {
  display: flex;
  align-items: center;
  .one-btn {
    min-width: 30px;
    height: 30px;
    background-color: rgba(9, 78, 182, 0.7);
    cursor: pointer;
    margin-right: 2px;
    &:last-child {
      margin-right: 0;
    }
    img {
      width: 100%;
      height: 100%;
      object-fit: scale-down;
    }
  }
}
</style>
